<template>
  <div class="">
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartId", "datas"],
  created(){
    this.$nextTick(()=>{
      this.$watch('datas',()=>{
        this.initChart();
      })
    })
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById(this.chartId));
      // 绘制图表
      myChart.setOption({
        polar: {
          center: ["50%", "50%"],
          radius: ["45%", "80%"], // 大小
        },
        tooltip: {
          trigger: "item",
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: "30%",
            showBackground: true,
            data: [this.datas[0]],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#FDDD60",
                  },
                  {
                    offset: 1,
                    color: "#FDDD60",
                  },
                ]),
              },
            },
          },

          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: "30%",
            showBackground: true,
            data: [this.datas[1]],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#7CFFB2",
                  },
                  {
                    offset: 1,
                    color: "#7CFFB2",
                  },
                ]),
              },
            },
          },
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: "30%",
            showBackground: true,
            data: [this.datas[2]],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#4C9DFF",
                  },
                  {
                    offset: 1,
                    color: "#4C9DFF",
                  },
                ]),
              },
            },
          },
        ],
      });

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  height: 260px;
}
</style>
